<!-- 门店管理 -->
<template>
    <div class="curriculum-resources-container">
      <header>
        <el-form ref="search" :model="searchForm" inline>
            <el-form-item label="员工姓名" prop="companyName">
              <el-input v-model="searchForm.name" style="width:300px;" type="text" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="员工手机" prop="companyName">
              <el-input v-model="searchForm.phone" style="width:300px;" type="text" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button @click="SearchReset('search')">重置</el-button>
              <el-button type="primary" :loading="searchLoading" @click="SearchSubmit">查询</el-button>
              <el-button type="primary" @click="CreateForm">新增</el-button>
            </el-form-item>
        </el-form>
      </header>
      <article>
        <Table
          :table-data="tableConfig.data.list"
          :table-column-options="tableConfig.columns"
          :table-data-total="tableConfig.data.total"
          :page="searchForm.page"
          :size="searchForm.size"
          @tableUpdate="CurrentChange"
        >
          <template #userOperation="{data}">
            <div>
              <el-button type="text" @click="TableEdit(data)">门店人员</el-button>
            </div>
          </template>
          <template #operation="{ data }">
            <el-button type="text" @click="TableEdit(data)">编辑</el-button>
            <el-button type="text" @click="TableDelete(data)">删除</el-button>
          </template>
        </Table>
      </article>
      <!-- create/edit form modal -->
      <el-dialog
        title="门店管理"
        :visible.sync="modalConfig.show"
        :lock-scroll="true"
        :scrollable="true"
        width="50%"
        destroy-on-close
        :before-close="() => FormCancel('formData')"
      >
        <el-form ref="formData" :model="modalConfig.formData" label-width="120px">
            <el-form-item label="人员名称" prop="companyName">
                <el-input v-model="modalConfig.formData.companyName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="区域" prop="region">
                <el-select v-model="modalConfig.formData.region" placeholder="请选择区">
                    <el-option
                    v-for="item in regionOptions"
                    :key="item.id"
                    :label="item.areaName"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="运营时间" prop="endTime" >
                <el-input type="textarea" v-model="modalConfig.formData.detailAddress" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="家庭住址" prop="detailAddress">
                <el-input type="textarea" v-model="modalConfig.formData.detailAddress" placeholder="请输入" />
            </el-form-item>
            <el-divider />
            <el-form-item style="text-align: right;">
                <el-button @click="FormCancel('formData')">取消</el-button>
                <el-button type="primary" @click="FormSubmit">确定</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Table from '@/components/Table/index'
  import meetApi from '../../api/meet.js'
  export default {
    name: 'storeMange',
    components: {
      Table
    },
    data() {
      return {
        provinceOptions: [],
        cityOptions: [],
        regionOptions: [],
        searchLoading: false,
        searchForm: {
            meetingShopId: '',
            name: '',
            phone: '',
            pageNum: 1,
            pageSize: 10
        },
        tableConfig: {
          columns: [
            {
              label: '人员姓名',
              prop: 'companyName',
              width: 100
            },
            {
              label: '手机号',
              prop: 'detailAddress',
              width: 100
            },
            {
              label: '入职日期',
              prop: 'createTime',
              width: 100
            },
            {
              label: '操作',
              columnType: true,
              slotName: 'operation',
              width: 200
            }
          ],
          data: {}
        },
        modalConfig: {
          title: '人员管理',
          show: false,
          formData: {
            "createTime": "",
            "createUserId": "",
            "createUserName": "",
            "delFlag": "",
            "meetingShopId": ""
          }
        }
      }
    },
    mounted() {
        this.searchForm.meetingShopId = this.$route.query.id
        this.modalConfig.formData.meetingShopId = this.$route.query.id
        this.TableList()
        this.queryProvice()
    },
    methods: {
      TableList() {
        this.$yAxios({
          url: meetApi.queryShopUser,
          data: this.searchForm,
          loading: true
        }, info => {
          console.log(info)
          this.tableConfig.data = info
        })
      },
      // 点击查询按钮
      SearchSubmit() {
        this.searchForm.pageNum = 1
        this.TableList()
      },
      // 点击重置按钮
      SearchReset(name) {
        this.$refs[name].resetFields()
        this.searchForm.pageNum = 1
        this.TableList()
      },
      // 点击新增按钮
      CreateForm() {
        this.modalConfig.show = true
        delete this.modalConfig.formData.id
      },
      // 分页数据回调
      CurrentChange(e) {
        this.searchForm.pageNum = e.page
        this.searchForm.pageSize = e.size
        this.TableList()
      },
      // 点击表格内删除
      TableDelete(data) {
        this.$confirm('你确定要删除此条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$yAxios({
            url: meetApi.storeRemove,
            data: {ids: [data.id]},
            loading: true
          }, info => {
            this.TableList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 点击表格内编辑
      TableEdit(data) {
        this.modalConfig.show = true
        this.$yAxios({
          url: meetApi.queryStoreById,
          data: {id: data.id},
          loading: true
        }, info => {
          console.log(info, 'edit--------')
          this.modalConfig.formData = info
          const { province, city } = info
          this.queryCity(province)
          this.queryRegion(city)
        })
      },
      // 点击表单确定
      async FormSubmit() {
        this.$yAxios({
          url: meetApi.storeSave,
          data: this.modalConfig.formData,
          loading: true
        }, info => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.TableList()
          this.$refs['formData'].resetFields()
          this.modalConfig.show = false
        })
      },
      // 点击表单取消
      FormCancel(name) {
        this.$refs[name].resetFields()
        this.modalConfig.show = false
      },
      queryProvice(){
        this.$yAxios({
          url: meetApi.queryByParend,
          data: {pid: ''},
        }, info => {
          this.provinceOptions = info
        })
      },
      queryCity(id,type){
        if(type){
  
          this.modalConfig.formData.city = ''
          this.modalConfig.formData.region = ''
        }
        this.$yAxios({
          url: meetApi.queryByParend,
          data: {pid: this.modalConfig.formData.province},
          loading: true
        }, info => {
          this.cityOptions = info
        })
      },
      queryRegion(id){
        this.$yAxios({
          url: meetApi.queryByParend,
          data: {pid: this.modalConfig.formData.city},
          loading: true
        }, info => {
          this.regionOptions = info
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .curriculum-resources-container{
      padding: 20px;
  }
  </style>
  